{% extends 'base.html' %}

{% block title %}
{% load myfilter %}
<title>详情</title>
{% endblock %}
{% block css %}
<style>
    .up {
        background-color: rgba(0, 0, 0, 0.78);
        height: 300px;
    }

    .jumbotron {
        background-color: rgba(0, 0, 0, 0);
        color: white;
    }

    .thumbnail {
        background-color: white;
    }

    .down{
        border: 1px solid black;
    }
    .down p{
        font-size: 20px;
        font-weight: 800;
    }
    .title {
        font-weight: 800;

    }
    .right{
        float: right;
    }




    #text1 {
        font-size: 16px;
    }

    .text1 {
        font-size: 16px;
    }

    .mytag {
        font-size: 16px;
    }

    .text3 {
        display: inline-block;
        font-size: 20px;
        font-weight: 600;
        color: red;
    }
    .small_box{
        font-size: 16px;
    }
    .small_div{
        margin-top: 15px;
    }

    .title1 {
        font-weight: 800;
    }
    .tag span{
        font-size: 18px;
    }
</style>
{% endblock %}
{% block body %}
{% include 'header.html' %}
{% csrf_token %}
<div class="box">
    <!--上-->
    <div class="up row col-md-13">
        <!--左-->
        <div class="left row col-md-5 col-md-offset-2">

            <div class="jumbotron">
                <h1 class="title">{{ course.title }}</h1>
                <p id="text1">{{ course.info }}</p>
                {% for t in course.tag.all %}
                <a style="text-decoration: none" href="{% url 'main:tag_page' t.id %}"><span class="label  mytag ">{{ t.title }}</span></a>
                {% endfor %}
                <br>
                <br>

                <span class="text1">{{ course.collect_num }} 个学生收藏</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <span class="text1">创建者 <a href="#">{{ course.author }}</a> </span>
                <br>
                <p class="text-warning">上次更新时间&nbsp&nbsp&nbsp {{ course.update_time }} </p>
            </div>

        </div>
        <!--右-->
        <div class="right row col-md-5 ">

            <div class="col-sm-6 col-md-5">
                <div class="thumbnail">
                    <video width="100%" height="100%" controls>
                        <source src="/media/{{ course.video }}" type="video/mp4">
                    </video>
                    <div class="caption">
                        <h1 class="title">{{ course.price }}</h1>
                        <br>
                        {% if request.user.is_authenticated %}
                            {% if course|has_buy_order:request.user %}
                                <button type="button" class="btn btn-success buy{{ course.id }} buy  btn-lg btn-block"
                                        data-course-id="{{ course.id }}">移除购物车
                                </button>
                            {% else %}
                                <button type="button" class="btn btn-warning buy{{ course.id }} buy btn-lg btn-block"
                                        data-course-id="{{ course.id }}">添加到购物车
                                </button>
                            {% endif %}
                        <span class="text3">赶快收藏起来吧<img src="/static/img/手指示.png"></span>
                            {% if course|has_collection:request.user %}
                                <a class="btn"><img class="collect{{ course.id }}  collect   " data-course-id="{{ course.id }}"
                                                    src="/static/img/collected.png"></a>
                            {% else %}
                                <a class="btn"><img class="collect{{ course.id }}  collect  " data-course-id="{{ course.id }}"
                                                    src="/static/img/collect.png"></a>
                            {% endif %}
                        {% else %}
                          <a  class="btn btn-default" href="{% url 'user:login' %}">添加到购物车</a>
                          <a href="{% url 'user:login' %}" class="btn"><img  src="/static/img/collect.png"></a>

                        {% endif %}
                        <p style="text-align: center">30天退款保证</p>
                        <p class="title1">本课程包括</p>
                        {% if course.video_time %}
                        <p>
                            <img src="/static/img/视频.png">&nbsp&nbsp&nbsp
                            <span>{{ course.video_time }}</span>
                        </p>
                        {% endif %}

                        {% if course.text_num %}
                        <p>
                            <img src="/static/img/文章.png">&nbsp&nbsp&nbsp
                            <span>{{ course.text_num }}</span>
                        </p>
                        {% endif %}

                        {% if course.homework %}
                        <p>
                            <img src="/static/img/作业.png">&nbsp&nbsp&nbsp
                            <span>{{ course.homework }}</span>
                        </p>
                        {% endif %}

                        {% if course.practice_num %}
                        <p>
                            <img src="/static/img/练习练习.png">&nbsp&nbsp&nbsp
                            <span>{{ course.practice_num }}</span>
                        </p>
                        {% endif %}

                        {% if course.download_resources %}
                        <p>
                            <img src="/static/img/下载.png">&nbsp&nbsp&nbsp
                            <span>{{ course.download_resources }}</span>
                        </p>
                        {% endif %}
                        <p>
                            <img src="/static/img/手机.png">&nbsp&nbsp&nbsp
                            <span>在移动设备和电视上观看</span>
                        </p>
                        <p>
                            <img src="/static/img/无穷.png">&nbsp&nbsp&nbsp
                            <span>完整的永久访问权</span>
                        </p>
                        {% if course.end_certificate %}
                        <p>
                            <img src="/static/img/奖杯.png">&nbsp&nbsp&nbsp
                            <span>{{ course.end_certificate }}</span>
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>

        </div>

    </div>


    <!--下-->
    <div class="down row col-md-5 col-md-offset-2">
        <p>你将会学到的</p>
        <div class="small_box">
            <div class="small_div" >
                <img src="/static/img/对号.png">
                <span>使用Cookies and Sessions，記錄使用者的登入資訊，大幅網頁使用者的使用體驗</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>使用Postman來對API做資料確認與使用</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解HTTP Status Code，製作出可以送出不同種類Status Code的網站伺服器</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>從製圖開始，在網頁中加入精美動畫效果</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解駭客的基本操作與背後工作原理</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解電腦儲存顏色與資料方式，認識二元數編碼原理與邏輯</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>認識近代密碼學的數學邏輯以及Hash Function在加密資料庫的全端應用</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解DOM的語言架構與相關函數</span>>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>像開發人員一樣思考。成為問題解決的專家！</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>學會加密資料庫，保護使用者資料安全，提高資料隱密性與資訊安全性</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>使用良好的程式語法，讓網頁在Firefox, Chrome, Microsoft Edge, Safari等主流網站都流暢運行</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>製作出個人專屬網頁，展開人脈與互動連結</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>製作7個美觀且實用度高的網站，成為面試作品的一大利器</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>建立登入頁面，將使用者資料與密碼加密並儲存在資料庫中</span>
            </div>
            <div class="small_div" >
                <img src="/static/img/对号.png">
                <span>使用Cookies and Sessions，記錄使用者的登入資訊，大幅網頁使用者的使用體驗</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>使用Postman來對API做資料確認與使用</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解HTTP Status Code，製作出可以送出不同種類Status Code的網站伺服器</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>從製圖開始，在網頁中加入精美動畫效果</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解駭客的基本操作與背後工作原理</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解電腦儲存顏色與資料方式，認識二元數編碼原理與邏輯</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>認識近代密碼學的數學邏輯以及Hash Function在加密資料庫的全端應用</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>了解DOM的語言架構與相關函數</span>>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>像開發人員一樣思考。成為問題解決的專家！</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>學會加密資料庫，保護使用者資料安全，提高資料隱密性與資訊安全性</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>使用良好的程式語法，讓網頁在Firefox, Chrome, Microsoft Edge, Safari等主流網站都流暢運行</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>製作出個人專屬網頁，展開人脈與互動連結</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>製作7個美觀且實用度高的網站，成為面試作品的一大利器</span>
            </div>
            <div class="small_div">
                <img src="/static/img/对号.png">
                <span>建立登入頁面，將使用者資料與密碼加密並儲存在資料庫中</span>
            </div>


        </div>

    </div>
    <div class="row col-md-5 col-md-offset-2">
        <h1> <span class="label label-default">相关标签<img style="width: 36px" src="/static/img/icon-finger-down.png"></span></h1>
        <a style="text-decoration: none" class="tag" href="{% url 'main:category_page' course.category.id  course.category.id %}"> <span class="label label-default ">{{ course.category.title }}</span></a>
        {% for tag in  course.category.tag_set.all %}
        <a  style="text-decoration: none" class="tag"  href="{% url 'main:tag_page' tag.id  %}"> <span class="label label-default ">{{ tag.title }}</span></a>
        {% endfor %}

    </div>

</div>




{% endblock %}
{% block js %}
<script>
    $(function () {
        $(".collect").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                $.ajax({

                    url: "/operation/change_collect/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("取消收藏")

                            $(`.collect${courseId}`).attr("src", "/static/img/collect.png");


                        } else {
                            console.log("收藏成功")
                            $(`.collect${courseId}`).attr("src", "/static/img/collected.png");

                        }
                    }
                });
            }
        )
    })


    $(function () {
        $(".buy").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                $.ajax({
                    url: "/operation/buy_order_change/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("取消收藏")

                            $(`.buy${courseId}`).removeClass("btn-success");
                            $(`.buy${courseId}`).addClass("btn-warning");
                            $(`.buy${courseId}`).html("添加到购物车")
                        } else {
                            console.log("收藏成功")
                            $(`.buy${courseId}`).removeClass("btn-warning");
                            $(`.buy${courseId}`).addClass("btn-success");
                            $(`.buy${courseId}`).html("移除购物车");

                        }
                    }
                });
            }
        )
    })
</script>
{% endblock %}


